<template>
  <div id="item-pai" style="width: 500px; height: 285px;"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts/core';
import axios from 'axios';

let data = ref({
  you: 0,
  liang: 0,
  qingdu: 0,
  zhongdu: 0,
  chongdu: 0,
  yanzhong: 0,
});

let getData = async () => {
  try {
    let res = await axios.get('http://localhost:7000/service-nepm/administrator/getlevelCount');
    let result = res.data;
    let chartData = {
      you: result.find(item => item.describe === '优')?.count || 0,
      liang: result.find(item => item.describe === '良')?.count || 0,
      qingdu: result.find(item => item.describe === '轻度污染')?.count || 0,
      zhongdu: result.find(item => item.describe === '中度污染')?.count || 0,
      chongdu: result.find(item => item.describe === '重度污染')?.count || 0,
      yanzhong: result.find(item => item.describe === '严重污染')?.count || 0,
    };

    data.value = chartData;
    updateChart(data.value);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

let updateChart = (chartData) => {
  const dataEntries = [
    { value: chartData.you, name: '优', itemStyle: { color: '#3cba54' } },
    { value: chartData.liang, name: '良', itemStyle: { color: '#f4c20d' } },
    { value: chartData.qingdu, name: '轻度', itemStyle: { color: '#f2b01e' } },
    { value: chartData.zhongdu, name: '中度', itemStyle: { color: '#f93f17' } },
    { value: chartData.chongdu, name: '重度', itemStyle: { color: '#d50000' } },
    { value: chartData.yanzhong, name: '严重', itemStyle: { color: '#4A148C' } }
  ];

  const sortedData = dataEntries.sort((a, b) => b.value - a.value); // 从大到小
  let alternatingData = [];
  for (let i = 0, j = sortedData.length - 1; i <= j; i++) {
    alternatingData.push(sortedData[i]); //加最大的
    if (i !== j) alternatingData.push(sortedData[j]); //加最小的
    j--;
  }

  myChart.setOption({
    backgroundColor: 'rgba(23,13,0,0.1)', 
    title: {
      text: '-- 空气质量指数级别分布 --',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#E4FFFF',
        fontWeight: 'bold',
        fontFamily: 'Arial'
      }
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#F9F9FA'
      }
    },
    series: [
      {
        type: 'pie',
        radius: '55%',
        center: ['50%', '50%'],
        data: alternatingData,
        roseType: 'radius',
        label: {
          color: '#F9F9FA'
        },
        labelLine: {
          lineStyle: {
            color: '#F9F9FA'
          },
          smooth: 0.2,
          length: 10,
          length2: 20
        },
        itemStyle: {
          shadowBlur: 200,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: (idx) => Math.random() * 200
      }
    ]
  });
};

let myChart;

onMounted(() => {
  let dom = document.getElementById('item-pai');
  myChart = echarts.init(dom);
  getData();
});

onBeforeUnmount(() => {
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style scoped>
#item-pai {
  width: 70%;
  height: 70%;
  max-width: 600px;
  max-height: 400px;
  margin: 0;
}
</style>
